<template>
    <div class="order">

        <h5>产品信息</h5>
        <div style="display: flex;">
            <img :src="detail.cover" alt=""
                style="width: 200px;height: 100px;vertical-align: middle;margin-right: 10px;">
            <div style="font-size: 20px;">{{ detail.title }}</div>
        </div>
        <h5>优惠券信息</h5>
        <div v-if="list.length == 0">暂无优惠券</div>
        <div v-else>
            <div v-for="item in list" style="cursor: pointer;" @click="xzyhj(item)"
                :class="isyhj == false ? 'normal' : 'active'">￥{{ item.price }}</div>
        </div>
        <h5>支付方式</h5>
        <div class="flex mb-5"
            style="border: 1px solid green;width: 120px;height: 50px;border-radius: 10px;text-align: center;color: green;line-height: 50px;">
            <span class="wxpay"><i role="img" class="n-icon __icon-d"><svg xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
                        <path data-name="XMLID 501 -1"
                            d="M408.67 298.53a21 21 0 1 1 20.9-21a20.85 20.85 0 0 1-20.9 21m-102.17 0a21 21 0 1 1 20.9-21a20.84 20.84 0 0 1-20.9 21m152.09 118.86C491.1 394.08 512 359.13 512 319.51c0-71.08-68.5-129.35-154.41-129.35s-154.42 58.27-154.42 129.35s68.5 129.34 154.42 129.34c17.41 0 34.83-2.33 49.92-7c2.49-.86 3.48-1.17 4.64-1.17a16.67 16.67 0 0 1 8.13 2.34L454 462.83a11.62 11.62 0 0 0 3.48 1.17a5 5 0 0 0 4.65-4.66a14.27 14.27 0 0 0-.77-3.86c-.41-1.46-5-16-7.36-25.27a18.94 18.94 0 0 1-.33-3.47a11.4 11.4 0 0 1 5-9.35"
                            fill="currentColor"></path>
                        <path data-name="XMLID 505 -7"
                            d="M246.13 178.51a24.47 24.47 0 0 1 0-48.94c12.77 0 24.38 11.65 24.38 24.47c1.16 12.82-10.45 24.47-24.38 24.47m-123.06 0A24.47 24.47 0 1 1 147.45 154a24.57 24.57 0 0 1-24.38 24.47M184.6 48C82.43 48 0 116.75 0 203c0 46.61 24.38 88.56 63.85 116.53C67.34 321.84 68 327 68 329a11.38 11.38 0 0 1-.66 4.49C63.85 345.14 59.4 364 59.21 365s-1.16 3.5-1.16 4.66a5.49 5.49 0 0 0 5.8 5.83a7.15 7.15 0 0 0 3.49-1.17L108 351c3.49-2.33 5.81-2.33 9.29-2.33a16.33 16.33 0 0 1 5.81 1.16c18.57 5.83 39.47 8.16 60.37 8.16h10.45a133.24 133.24 0 0 1-5.81-38.45c0-78.08 75.47-141 168.35-141h10.45C354.1 105.1 277.48 48 184.6 48"
                            fill="currentColor"></path>
                    </svg></i><b>微信支付</b></span>
        </div>
        <div style="color: red;font-size: 12px;">请在30分钟完成支付</div>
        <div style="text-align: right;"> <div v-if="isyhj == true">优惠券<span style="color: red;">{{yhje}}</span></div>  需支付 <span style="color: red;">￥{{detail.price}}</span></div>
        <div style="text-align: right;">
            <n-button type="primary" @click="qrzf()">确认支付</n-button>
        </div>

    </div>
</template>
<script setup>
import { NButton, NPopover, NTabs, NTabPane, createDiscreteApi } from "naive-ui";
import { useRoute } from "vue-router"
import { useRouter } from 'nuxt/app';
import { getCurrentInstance } from "vue";
let { ctx: that, proxy } = getCurrentInstance()
const detail = ref({});
const route = useRoute()
const isyhj = ref(false);
const list = ref([])
const yhjid=ref("");
const router=useRouter();
const yhje=ref("");
onMounted(() => {
    getorder()
    getyjh()
})
const getorder = async () => {
    const { data } = await useHttp("", `/goods/read?type=${route.params.type}&id=${route.params.id}`)
    detail.value = data.value
}
const getyjh = async () => {
    const { data } = await useHttp("", `/user_coupon?goods_id=${route.params.id}&type=${route.params.type}&page=1`)
    list.value = data.value.rows
}
const xzyhj = (item) => {
    isyhj.value = !isyhj.value
    
    if(isyhj.value == true){

yhje.value=item.price
console.log(yhje.value,"yhgk")
    detail.value.price= detail.value.price-Number(yhje.value)
    yhjid.value=item.id
    }else{
          detail.value.price= detail.value.price+Number(yhje.value)
        yhje.value=0
  yhjid.value=""
    }
    that.$forceUpdate()
}
const qrzf=async()=>{
      const { message } = createDiscreteApi(['message'])
    const {data,error}=await useHttp("","/order/save",{
        method:"post",
        body:{
            goods_id:detail.value.id,
            type:route.params.type,
            user_coupon_id:yhjid.value
        }
    }) 
  if (data.value == undefined) {
        console.log("12333")
        message.warning(error.value.data.data);
    } else {
      router.push("/pay/"+data.value.no)


    }

}
</script>
<style scoped>
.order {
    background: #fff;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.normal {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #e5e5e5;
}

.active {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: rgba(240, 160, 32, 0.16);
    color: #f0a020 !important;
}
</style>
